<template>
<div>
  <graphComp :keyMap="keyMap" :parentDesignerData='desigerData' :inputParams='params'></graphComp>
</div>
</template>
<script>
import graphComp from 'views/graph/designer.vue'
import api from 'api/device.js'

export default {
  props: {
    devId: {
      type: String,
      default: function() {
        return '';
      }
    },
    devType: {
      type: Number,
      default: function() {
        return 2;
      }
    }
  },
  watch: {
    devId() {
      this.show();
    }
  },
  data() {
    return {
      keyMap: {
        editable: 'false'
      },
      desigerData: {},
      params: {}
    };
  },
  methods: {
    show() {
      this.desigerData = {
        grsNo: this.getGrsNoByType()
      };
      api.queryItemByGraphid(this.devId).then((response) => {
        var iteminfo = response.data;
        this.desigerData = {
          "grsNo": 'item-line'
        };
        var idArray = [];
        var nameArray = [];
        for (var i = 0; i < iteminfo.length; i++) {
          idArray.push(iteminfo[i].itemid);
          nameArray.push(iteminfo[i].name);
        }
        this.params = {
          itemid: idArray,
          itemname: nameArray
        };
      }).catch((err) =>{
          console.error(err);
      });
    },
    getGrsNoByType() {
      return 'item-line';
    }
  },
  mounted() {
    this.show();
  },
  components: {
    graphComp
  }
};
</script>
